import React, { useState, useEffect, useCallback } from "react";
import { Button } from "antd";

export const LargeFileSlice = () => {
  const [file, setFile] = useState<File | null>(null);

  const readAndCalculateHash = useCallback(() => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      const hash = e.target?.result;
    };
  }, [file]);

  const oneTimeCalculateHash = useCallback(() => {
    if (!file) return;
    const hash = file.hash;
  }, [file]);

  return (
    <div className="flex flex-col gap-4">
      <input
        type="file"
        value={file?.name}
        onChange={(e) => setFile(e.target.files?.[0] || null)}
      />
      <div className="flex gap-4">
        <div>
          <Button onClick={readAndCalculateHash}>边读边计算分片hash</Button>
        </div>
        <div>
          <Button onClick={oneTimeCalculateHash}>一次性计算总hash</Button>
        </div>
      </div>
      <div>
        <p>计算完成</p>
        <p>文件信息</p>
        <p>文件名</p>
        <p>文件类型</p>
        <p>文件大小</p>
        <p>文件hash</p>
      </div>
    </div>
  );
};
